<script setup lang="ts">
import { Panel, useVueFlow, VueFlow } from '@vue-flow/core'
import type { Node, Edge } from '@vue-flow/core'

const nodes = ref([
  {
    id: '1',
    position: { x: 50, y: 50 },
    data: { label: 'Node 1' },
  },
  {
    id: '2',
    position: { x: 50, y: 250 },
    data: { label: 'Node 2' },
  },
  {
    id: '3',
    position: { x: 250, y: 50 },
    data: { label: 'Node 3' },
  },
  {
    id: '4',
    position: { x: 250, y: 250 },
    data: { label: 'Node 4' },
  },
])

const edges = ref<Edge[]>([
  {
    id: 'e1->2',
    source: '1',
    target: '2',
    data: {
      label: 'edge1',
    },
    label: 'edge1-label',
  },
  {
    id: 'e1->3',
    source: '1',
    target: '3',
  },
  {
    id: 'e2->3',
    source: '2',
    target: '3',
  },
  {
    id: 'e2->4',
    source: '2',
    target: '4',
  },
])
const { addEdges, removeEdges,updateEdge, getEdges } = useVueFlow()
const instance = useVueFlow()
/**
 * push方法还是有问题的：eg：先通过多个删除后，添加1到2的edge，结果又恢复到初始化的状态了。
 * push方法有问题，暂时不用了把。
 */
const addEdge1 = () => {
  edges.value.push({
    id: 'e1->2',
    source: '1',
    target: '2',
  })
}
const addEdge2 = () => {
  addEdges([
    {
      source: '1',
      target: '2',

      // if a node has multiple handles of the same type,
      // you should specify which handle to use by id
      sourceHandle: null,
      targetHandle: null,
    },
  ])

  console.log('添加后的edges：', edges)

  console.log('getEdges 获取edges：', getEdges)
}
/**
 * 也是有问题的。删除多个边，然后这个删除方法，也是回到了初始化的状态。
 * @param id
 */
const removeEdge = (id: string) => {
  console.log('添加后的edges：', edges, id)

  console.log(
    '是否有边的id：',
    edges.value.some((edge) => edge.id == id),
  )
  edges.value = edges.value.filter((edge) => {
    const flag = edge.id !== id
    console.log('变得id：', edge.id)
    console.log('flag:', flag)
    return flag
  })
}

const removeOneEdge = () => {
  removeEdges('e1->2')
}

const removeMultipleEdges = () => {
  removeEdges(['e1->3', 'e2->3'])
}

const updateEdge1 = (edgeId: string) => {
  // use the `updateEdgeData` method to update the data of an edge
  instance.updateEdgeData(edgeId, { hello: 'mona' })
}
const updateEdge2 = (edgeId: string) => {
  // find the edge in the state by its id
  const edge = instance.findEdge(edgeId)

  if (edge) {
    edge.data = {
      ...edge.data,
      hello: 'world',
    }
    edge.label = 'findEdge'

    console.log('当前的edge：',edge)
    console.log('选择和动画：', edge.selectable, edge.animated)
    // you can also mutate properties like `selectable` or `animated`
    edge.selectable = !edge.selectable
    // edge.animated = !edge.animated
  }
}
/**
 * 用法和updateNode不一样，参数不是edgeId。
 * @param edgeId
 */
const updateEdge3 = (edgeId: string) => {
  // updateEdge(edgeId, {
  //   label: 'updateEdge',
  //
  // })
}
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges">
    <panel>
      <a-space>
        <a-button @click="addEdge1">添加边（push）</a-button>
        <a-button @click="addEdge2">添加边（addEdges）</a-button>

        <a-button @click="removeEdge('e1->2')">Remove Edge（filter）</a-button>
        <a-button @click="removeOneEdge">Remove Edge 1（removeEdges）</a-button>
        <a-button @click="removeMultipleEdges">Remove Edges 1->3 和 2->3（removeEdges）</a-button>
      </a-space>
    </panel>
    <panel style="margin-top: 50px">
      <a-space>
        <a-button @click="updateEdge1('e1->2')">更新边（updateEdgeData）</a-button>
        <a-button @click="updateEdge2('e1->2')">更新边（findEdge）</a-button>
        <a-button @click="updateEdge3('e1->2')">更新边（updateEdge-> 跟node不一样）</a-button>
      </a-space>
    </panel>
  </VueFlow>
</template>

<style scoped></style>
